/**
下拉菜单

案例
<div class="dropdown">
  <button >下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">菜鸟教程 1</a>
    <a href="#">菜鸟教程 2</a>
    <a href="#">菜鸟教程 3</a>
  </div>
</div>
*/
.dropdown {
    position: relative;
    display: inline-block;
}

@mixin dropdown-content($s:0.33333s){
   //display: none;
   position: absolute;
   //渐变显示隐藏效果
   transition:all $s;
   visibility: hidden;
   opacity: 0;
}
.dropdown-content {
    @include dropdown-content;
}

.dropdown:hover .dropdown-content {
    //display: block;
    //渐变显示隐藏效果
    visibility: visible;
    opacity: 1;
}